<template>
	<div>
		<c_header :title="name" :leftOptions="{backText: ''}" :rightOptions="{showMore: true}"></c_header>
		<div id="vux_view_box_body" v-if="images">
			<div class="spots-imageview" v-for="item in images" >
				<span>加载中...</span>
		    	<x-img :src="item.picUrl" @on-success="success" @on-error="error"  :offset="200" container="#vux_view_box_body"></x-img>
		    </div>
		</div>
		
	    <c_sidemenu></c_sidemenu>
	</div>
</template>

<script>
import c_header from '@/components/c_header'
import c_sidemenu from '@/components/c_sidemenu'
import { XImg } from 'vux'

export default {
	data () {
		return {
			images: null
		}
	},
	computed: {
		name () {
			return this.$route.query.name
		}
	},
	components: {
		c_header, c_sidemenu, XImg
	},
	methods: {
		spots (name) {
			this.$vux.loading.show('数据加载中...')
			this.$getData.spots({keyword: name}, (response) => {
				this.images = response.data.showapi_res_body.pagebean.contentlist[0].picList
				this.$vux.loading.hide()
			})
		},
		success (src, ele) {
			const span = ele.parentNode.querySelector('span')
      		ele.parentNode.removeChild(span)
		},
		error (src, ele) {
			ele.parentNode.parentNode.removeChild(ele.parentNode)
		}
	},
	activated () {
		if(this.$route.params.images){
			this.images = this.$route.params.images
		}else{
			this.spots(this.name)
		}
		console.log(this.$route.params.images)
	},
	deactivated () {
		this.images = null
	}
}
</script>

<style>
#vux_view_box_body{padding-bottom: .6rem;}
.spots-imageview{text-align: center;margin: .6rem .6rem 0;border-radius: 5px;overflow: hidden;}
.spots-imageview img{width: 100%;}
</style>